<script setup lang="ts">
  import { Layout } from '@arco-design/web-vue'
  import { useRoute } from 'vue-router'

  const { Sider } = Layout
  const route = useRoute()
  const isActive = (path: string) => {
    return route.path === path
  }
</script>

<template>
  <Sider :width="72" theme="dark" class="!bg-gray-800 relative !z-[9999]">
    <nav class="mt-8">
      <div class="space-y-2 flex items-center flex-col">
        <RouterLink
          to="/workbench"
          :class="{
            'menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg': true,
            '!bg-gray-700 text-white': isActive('/workbench')
          }"
        >
          工作台
        </RouterLink>
        <RouterLink
          to="/workbench/order"
          class="menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg"
          active-class="!bg-gray-700 text-white"
        >
          订单管理
        </RouterLink>
        <RouterLink
          to="/workbench/category"
          class="menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg"
          active-class="!bg-gray-700 text-white"
        >
          分类管理
        </RouterLink>
        <RouterLink
          to="/workbench/dish"
          class="menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg"
          active-class="!bg-gray-700 text-white"
        >
          菜品管理
        </RouterLink>
        <RouterLink
          to="/workbench/setmeal"
          class="menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg"
          active-class="!bg-gray-700 text-white"
        >
          套餐管理
        </RouterLink>
        <RouterLink
          to="/workbench/data-count"
          class="menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg"
          active-class="!bg-gray-700 text-white"
        >
          数据统计
        </RouterLink>
        <RouterLink
          to="/workbench/employee"
          class="menu-item flex items-center text-gray-300 hover:text-white hover:!bg-gray-700 rounded-lg"
          active-class="!bg-gray-700 text-white"
        >
          员工管理
        </RouterLink>
      </div>
    </nav>
  </Sider>
</template>

<style scoped lang="less">
  .menu-item {
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    padding: 8px 5px;
    width: 48px;
    box-sizing: content-box;
    font-size: 12px;
    font-weight: 500;
  }
</style>
